<template>
  <div id="video">
    <van-nav-bar>
      <template #right>
        <van-icon name="search" size="25" @click="SearchAll" />
      </template>
      <template #title>
        <van-tabs
          v-model="active"
          animated
          line-width="50%"
          @click="show(active)"
        >
          <van-tab
            v-for="(item, index) in navheader"
            :title="item.title"
            :key="index"
          >
          </van-tab>
        </van-tabs>
      </template>
    </van-nav-bar>
    <van-tabs id="nin" v-model="active" animated line-width="40%">
      <van-tab v-for="(item, index) in list" :key="index">
        <div id="videoContent">
          <classify v-if="ClShow"> </classify>
          <recommend v-if="ReShow"> </recommend>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import classify from "./video/classify";
import recommend from "./video/recommend";
// 导入api
import {getRecommendMv} from "network/api/VideoApi";
export default {
  components: {
    classify,
    recommend,
  },
  data() {
    return {
      navheader: [
        {
          title: "推荐",
          content: "数据",
        },
        {
          title: "分类",
          content: "分类",
        },
      ],
      list: [
        {
          title: "听听",
          content: "数据",
        },
        {
          title: "推荐",
          content: "sdafasd",
        },
      ],
      ClShow: false,
      ReShow: true,
      active: 0,
    };
  },
  mounted() {
    console.log("我是视频");
    getRecommendMv("内地", 1,20).then(res=>{
      console.log(res);
    })
  },
  methods: {
    show(active) {
      if (active == 0) {
        this.ClShow = false;
        this.ReShow = true;
      } else {
        this.ClShow = true;
        this.ReShow = false;
      }
    },
    SearchAll() {
      this.$router.push({ path: "/searchView" });
    },
  },
};
</script>

<style>
#video {
  background: #fff;
  margin-bottom: 95px;
}
#videoContent {
  margin-top: 50px;
}
#video > div.van-nav-bar.van-hairline--bottom > div {
  width: 100%;
  position: fixed;
  background: #fff;
}
#video
  > div.van-nav-bar.van-hairline--bottom
  > div
  > div.van-nav-bar__title.van-ellipsis
  > div
  > div.van-tabs__wrap
  > div
  > div.van-tab.van-tab {
  background: #fff;
}
#nin > div.van-tabs__wrap {
  display: none;
}
#video
  > div.van-nav-bar.van-hairline--bottom
  > div
  > div.van-nav-bar__title.van-ellipsis
  > div
  > div.van-tabs__wrap
  > div
  > div.van-tab.van-tab--active
  > span {
  font-size: 20px;
  font-weight: bold;
  padding-left: 10px;
  padding-right: 10px;
}
</style>